<template style="margin: 0;padding: 0">
  <div class="common-layout" style="margin: 0;position: relative">
    <el-container>
      <!--顶部下载客户端/书架...栏-->
      <el-header>
        <el-row :gutter="10">
          <el-col :span="16" :offset="4" >
            <img src="bobo/shuqi.png" style="float: left;">
            <div style="float: right;margin-right:  50px;line-height: 55px">
              下载客户端&nbsp;|&nbsp;书架&nbsp;|&nbsp;登录&nbsp;|&nbsp;注册
            </div>
          </el-col>

        </el-row>

      </el-header>
      <!--切换菜单和背景图-->
      <div>
        <div style="margin:5px 0;" class="up">
          <el-row :gutter="10">
            <el-col :span="13" :offset="4">
              <el-menu mode="horizontal" text-color="red" active-text-color="#ffd04b" style="text-underline: none">
                <el-menu-item>首页</el-menu-item>
                <el-menu-item>书库</el-menu-item>
                <el-menu-item>达人中心</el-menu-item>
                <el-menu-item>版权推荐</el-menu-item>
                <el-menu-item>作家专区</el-menu-item>
                <el-menu-item>筑金计划</el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="3" >
              <el-input style="width: 200px;margin-top: 20px"></el-input>
            </el-col>
          </el-row>
        </div>
        <div >
          <img src="bobo/nav_title.png" style="width:100%" >
        </div>
      </div>
      <!--main栏,内容都在该部分,第一部分是主编推荐,其余的也在下面-->
      <el-main>
        <!--        主编推荐模块-->
        <el-row :gutter="10">
          <el-col :span="6">
            <el-card >
              <img src="mwzz.png" style="width:100%">
              <p>《宝可梦》:妙蛙种子</p>
              <div style="margin-bottom: 10px">
                <span>属性:草,毒</span>
                <span>爱好:睡觉</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <div class="zb" style="border: 1px solid red;">
          <div class="zb_top"style="position: relative;border: 1px solid yellow;">
            <el-row :gutter="10">
              <el-col :span="16" :offset="4">
                <hr>
                <!--                  左-->
                <el-row :gutter="10">
                  <el-col :span="7" >
                    <div class="zb_top_l" style="border: 1px solid red;height: 500px;">
                      111111
                    </div>
                  </el-col>
                </el-row>
                <!--                      中-->
                <el-row :gutter="10">
                  <el-col :span="12" :offset="7">
                    <div class="zb_top_m" style="border: 1px solid blue;height: 500px;">
                      <div class="zb_top_m_up" style="border: 1px solid black">
                        中上
                      </div>
                      <div class="zb_top_m_down" style="border: 1px solid green">
                        中下
                      </div>

                    </div>
                  </el-col>
                </el-row>

                <!--                 右 -->
                <el-row :gutter="10">
                  <el-col :span="5" :offset="19">
                    <div class="zb_top_r" style="border: 1px solid pink;height: 500px">
                      右
                    </div>
                  </el-col>
                </el-row>

              </el-col>
            </el-row>
          </div>

          <div class="zb_bottom">
            <img src="bobo/nddk.jpg" alt="">
          </div>
        </div>
      </el-main>
      <!--底部信息栏-->
      <el-footer style="background-color: #3D3D3D;width: 100%;height: 300px" class="fotter">
        <el-row :gutter="10" style="height: 300px">
          <el-col :span="16" :offset="4">
            <el-form style="color: #fff;">
              <el-form-item>
                <div style="width: 100%;padding-top:9px">
                  <div style="float: left">联系我们 |关于我们 |投稿声明 |常见问题 |网站微博 |自审制度</div>
                  <div style="float: right">©2015-2020 至远悦读（广州）文学信息技术有限公司 版权所有</div>
                </div>
              </el-form-item>
              <el-form-item>
                <span style="font-size: 13px" >阿里巴巴集团 |网银商行 |淘宝网 |天猫 |聚划算 |全球速卖通 |阿里巴巴国际交易市场 |1688 |阿里妈妈 |飞猪 |阿里云 |ALiOS |高德 |UC |友盟 |虾米 |大麦网 |优酷 |钉钉 |支付宝 |阿里影业 |阿里健康 |阿里体育|</span>
              </el-form-item>
              <el-form-item>
                <div style="font-size: 13px">
                  网络文化经营许可证 粤网文[2023]1543-112号 粤ICP备13078413号
                  <img src="bobo/footer3.png" style="height: 25px" class="f_img">
                  粤公网安备44010602000197号 增值电信业务许可证 粤B2-20240136 出版物经营许可证 新出发穗批字第4401100762号
                </div>
              </el-form-item>
              <el-form-item>
                <div >
                  营业执照
                  <img src="bobo/footer4-1.png" style="height: 25px" class="f_img">
                  <img src="bobo/footer4-2.png" style="height: 25px" class="f_img">
                  违法和不良信息举报 0571-26883636 kefu@idc.ucweb.com| 网络内容从业人员违法违规行为专项举报
                </div>
              </el-form-item>
              <el-form-item>
                <div style="width: 100%;">
                  <div style="float: left">请使用者仔细阅读书旗《书旗用户服务协议》、《隐私保护政策》说明</div>
                  <div style="float: right">地址：广州市天河区高普路38号620房（仅限办公） 电话：0571-26883636</div>
                </div>
              </el-form-item>
              <el-form-item>
                <div style="width: 100%;">
                  <div style="float: left">为保证更好的浏览效果，请使用Chrome或其他主流浏览器访问</div>
                  <div style="float: right">本站部分作品的封面设计图系由作者自行上传，本站未进行任何人工编辑整理。若有侵犯您的知识产权，请及时通知</div>
                </div>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>


<script setup>

</script>

<style scoped>
.f_img{
  vertical-align: middle;
}
</style>